<script lang="ts" setup> 
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import MenuBtn from '@/components/icons/MenuBtn.vue'
import ExitBtn from '@/components/icons/ExitBtn.vue'
import Menus from '@/components/Menus.vue'
import { tabStore } from '@/stores/tabs' 

const router = useRouter()
const store = tabStore()
const showDrawer = ref(false)

function showMenuMain(){
  showDrawer.value = true
}

function exit(){
  store.$reset()
  localStorage.clear()
  router.push({name:'Login'})
}
</script>

<template>
  <div class="pt-10 d-flex justify-content-center">
    <MenuBtn @click="showMenuMain" />
  </div>
  <div class="pt-10 d-flex justify-content-center">
    <ExitBtn @click="exit" />
  </div>
  <el-drawer size="200px" v-model="showDrawer" direction="ltr" :with-header="false">
    <Menus @hideMenu="showDrawer = false" />
  </el-drawer>
</template>

<style scoped>
.pt-10{
  padding-top: 10px;
}
</style>

